<%- include ../common/header %>
<link rel="stylesheet" href="/css/onlinefaq/home.css" />
<!--<link rel="stylesheet" href="/css/onlinefaq/aui.css" />-->
<link rel="stylesheet" href="/css/onlinefaq/onlineFAQ.css" />
<link href="/css/common/dialog.css" rel="stylesheet" type="text/css" />
<style>
	.contentBox {
		border-radius: 4px!important;
		border: solid 1px #D8D8D8!important;
		width: 64%!important;
		height: 3.6rem!important;
		background-color: #F9F9F9!important;
		margin-top: 6px!important;
		margin-bottom: 6px!important;
		font-size: 16px!important;
		float: left!important;
		line-height: 3.6rem!important;
	}
	.getPic{
    border-radius: .4rem;
    color: #7F7F7F;
    font-size:27px;
    display: inline-block;
    cursor: pointer;
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
    text-align: center;
    transition: background-color .5s cubic-bezier(.24,.68,.67,.9);
  }
  span{
        cursor: pointer;
    pointer-events: none;
  }
  input[type=file] {
    display: none;
    visibility: hidden;
  }
</style>
<div class="tanDrop" id="tanDrop">
	<div class="dropBox">
		<div class="dropClose"></div>
		<div class="droptitle">温馨提示</div>
		<div class="dropword" style="color:#787878">
			<div class="word">
				<i></i>
				<p>专家只解答各种医学考试专业问题，在软件功能上遇到的问题请联系客服：<span style="color:#FF6B6B" id="telephone" phone="4007278800">400-727-8800</span></p>
			</div>
		</div>
		<div class="problem">
			<div class="problemBtn">马上提问</div>
		</div>
	</div>
</div>
<!--导航栏-->
<div class="dayiBox">
	
	<div class="dayiHeader">
		<div class="backBtn"><img src="/images/back.png" alt="返回上层" /></div>
		<strong id="myAskAnswer"><img src="/images/img/more.png"/></strong>
		<div id="askAnswerMsgNum" class="msgNum"></div>
		<h2>在线答疑</h2>
	</div>
	
</div>
<!--loading动画-->
<div id="loadingDiv" class="loader"></div>
<!--专家显示部分-->
<div class="topBigBox">
	<div class="T_layout">
		<!--轮播图-->
		<div class="T_banner">
			<ul class="clearfix allZhuan" id="allZhuanID">

			</ul>
			<ul class="pointlist">

			</ul>
		</div>
	</div>
</div>
<!--聊天室内容-->
<div id="chatRoomContentID" class="chatRoomContent" style="display:block">
	<div class="chatRoomContent_box" id="chatRoomContent_boxID">

	</div>
	<!--聊天室底部-->
<div id="atBoxID" class="atBox">
	<!--取消按钮-->
	<ol class="atUserList" id="cancelAtListID">
		<!--<span class="quxiao">取消@</span>-->
	<li class="atUserLiC" id="atMeLiC"><span>取消@</span></li>
	</ol>
	<!--专家列表-->
	<ol class="atZhuanList" id="atZhuanListID">
		
	</ol>
	<!--成员列表-->
	<ol class="atUserList" id="atUserListID"></ol>
</div>
<div class="addpicBox">
	<div></div>
</div>
<div class="sendDiv" id="sendDivID">

	<div class="aiTeButton" id="aiTeButtonID">@</div>
	<div class="getPic" id="getPicID">+</div>
	<!--<label class="getPic">
  		<span>+</span>
  		<input type="file" id="addImg" accept="image/*;capture=camera">
	</label>-->
	<input id="contentBoxID" class="contentBox" placeholder="我也说两句" type="text">
	<div class="sendButton" id="sendButtonID">发送</div>
</div>
</div>

<!--聊天室内容end-->

<!--聊天室底部end-->
<!--与我相关-->
<div class="aboutMyChat_main" id="aboutMyChat_mainID" style="display:none">
	<div class="aboutMyChat_an" id="aboutMyChat_anID">
		<ol class="myChatList" id="myChatListID">

		</ol>
	</div>
	<!--没有消息时显示框-->
	<div class="noMyMsg" id="noMyMsgID" style="display:none;">暂无信息</div>
	<!--我的end-->
</div>
<!--与我相关end -->
<script src="/js/onlinefaq/socket.io.min.js" type="text/javascript"></script>
<script src="/js/common/yingSoftPrg.js" type="text/javascript"></script>
<script src="/js/common/ajax.js" type="text/javascript"></script>
<script src="/js/common/yingSoftCookie.js" type="text/javascript"></script>
<script src="/js/common/agentInfo.js" type="text/javascript"></script>
<script src="/js/common/storage.js" type="text/javascript"></script>
<script src="/js/libs/jquery.js" type="text/javascript"></script>
<script src="/js/common/dialog.js" type="text/javascript"></script>
<script src="/js/onlinefaq/common.js" type="text/javascript"></script>
<script data-main="/js/onlinefaq/onlinefaq" src="/js/libs/require.js"></script>
<%- include ../common/footer %>
<script>
		var tanDrop = document.getElementById('tanDrop');
		
		var type = G_Prg.getQueryString('type');
		if(type == '1') {
			tanDrop.style.display = 'none';
		} else {
			tanDrop.style.display = 'block';
		}
		
		/*******************************************************************************
		 * 专家栏展示（轮播）
		 * ******************************************************************************/

		/*banner*/
		var banner = document.querySelector('.T_banner');
		/*屏幕的宽度*/
		var w = banner.offsetWidth;

		/*图片盒子*/
		var imageBox = banner.querySelector('ul:first-child'); /*querySelector只支持有效的css选择器*/
		/*点盒子*/
		var pointBox = banner.querySelector('ul:last-child');
		/*所有的点*/
		var points = pointBox.querySelectorAll('li');

		/*添加过渡*/
		var addTransition = function() {
			imageBox.style.webkitTransition = "all .2s"; /*兼容*/
			imageBox.style.transition = "all .2s";
		};
		/*删除过渡*/
		var removeTransition = function() {
			imageBox.style.webkitTransition = "none"; /*兼容*/
			imageBox.style.transition = "none";
		};
		/*改变位子*/
		var setTranslateX = function(translateX) {
			imageBox.style.webkitTransform = "translateX(" + translateX + "px)";
			imageBox.style.transform = "translateX(" + translateX + "px)";
		};
		//
		//			/*1.自动的滚动起来    （定时器，过渡）*/
		var index = 1;

//		var timer = setInterval(function() {
//			/*箱子滚动*/
//			index++;
//			/*定位  过渡来做定位的  这样才有动画*/
//			/*加过渡*/
//			addTransition();
//			/*改变位子*/
//			setTranslateX(-index * w);
//
//		}, 4000);

		//			/*绑定一个过渡结束事件*/
		var zhuanlength = document.querySelector('.zhuanList');

		itcast.transitionEnd(imageBox, function() {
			if(index <= 0) {
				index = $('#allZhuanID li').length - 1;

				/*加过渡*/
				removeTransition();
				/*改变位子*/
				setTranslateX(-index * w);
			} else if(index >= $('#allZhuanID li').length - 1) {
				index = $('#allZhuanID li').length - 1;
				console.log($('#allZhuanID li').length)
					/*做定位*/
					/*加过渡*/
				removeTransition();
				/*改变位子*/
				setTranslateX(-index * w);
			}
			$('.pointlist').empty();
			setPoint();

		});

		/*2.点随之滚动起来     （改变当前点元素的样式）*/
		var setPoint = function() {

			var pointlength = $('.allZhuan li').length - 1;
			console.log(pointlength)
				/*把所有点的样式清除*/

			for(var i = 0; i < pointlength; i++) {

				var point = '<li></li>';
				$('.pointlist').append(point);
				$('.pointlist li')[i].className = " ";
				/* points[i].classList.remove('now');*/
			}
			$('.pointlist li')[index - 1].className = "now";
		}

		/*3.图片滑动 touch事件）*/
		var startX = 0;
		var moveX = 0;
		var distanceX = 0;
		var isMove = false;

		imageBox.addEventListener('touchstart', function(e) {
			/*清除定时器*/
			//				clearInterval(timer);
			startX = e.touches[0].clientX;
		});
		imageBox.addEventListener('touchmove', function(e) {
			isMove = true;
			moveX = e.touches[0].clientX;
			distanceX = moveX - startX; /*distanceX  值  正负*/

			/*算出当前图片盒子需要定位的位子*/
			//				console.log(distanceX);

			/*将要去做定位*/
			var currX = -index * w + distanceX;
			/*删除过渡*/
			removeTransition();
			/*改变位子*/
			setTranslateX(currX);

		});
		imageBox.addEventListener('touchend', function(e) {

			/*当超过了一定的距离的时候 */
			if(isMove && (Math.abs(distanceX) > w / 4)) {
				/*5.当超过了一定的距离的时候    滚动  到上一张 或 下一张  （一定的距离  1/4  屏幕宽度  过渡）*/
				if(distanceX > 0) {
					index--; /*向右滑  上一张*/
				} else {
					index++; /*向左滑 下一张*/
				}
				addTransition();
				setTranslateX(-index * w);
			}
			/*当不超过一定的滑动距离的时候*/
			else {
				/*4.当不超过一定的滑动距离的时候  吸附回去  定位回去     （一定的距离  1/4  屏幕宽度  过渡）*/
				addTransition();
				setTranslateX(-index * w);
			}

			/*重置*/
			startX = 0;
			moveX = 0;
			distanceX = 0;
			isMove = false;

			/*添加定时器*/
//			clearInterval(timer);
//			timer = setInterval(function() {
//				/*箱子滚动*/
//				index++;
//				/*定位  过渡来做定位的  这样才有动画*/
//				/*加过渡*/
//				addTransition();
//				/*改变位子*/
//				setTranslateX(-index * w);
//			}, 4000);
		});
		$('.wrap').scrollTop($('.chatRoomContent_box').height());
</script>